<template>
  <div class="reply_module-wrapper">
    <replyContentModule :reply="reply" />
    <div class="child__group">
      <template v-for="child in children">
        <replyContentModule :key="child.rpid" :reply="child" isChild="true" />
      </template>
      <el-pagination :current-page="page" :hide-on-single-page="true" :page-size="5" :total="roucnt" @current-change="currentPageHandler" background layout="prev, pager, next" next-text="下一页" prev-text="上一页" small />
      <sendModule :aid="aid" :parent="parent" :placeholder="placeholder" :root="root" @success="submitResult" v-if="isSendModuleShow" />
    </div>
  </div>
</template>

<script>
import nicknameModule from '@/components/nickname.vue';
import metaModule from './metaModule.vue';
import sendModule from './sendModule.vue';
import { getReplyListAPI } from '@/api/reply';

export default {
    name: 'ReplyContent',
    components: {
        sendModule,
        replyContentModule: {
            name: 'ReplyContentModule',
            components: {
                nicknameModule,
                metaModule,
            },
            props: ['reply', 'isChild'],
            data() {
                return {
                    isContentShowAll: false,
                    contentHeight: 0,
                };
            },
            computed: {
                userInfo() {
                    return this.reply.user;
                },
                content() {
                    return this.reply.content;
                },
                isShowBtn() {
                    return this.contentHeight >= 300;
                },
                showBenText() {
                    return this.isContentShowAll ? '收起' : '展开全部';
                },
            },
            render() {
                return (
                    <div class="reply-main__group">
                        <mivaAvatar class="avatar__item" userInfo={this.userInfo} size={this.isChild ? 30 : 48} />
                        <div class="content__group">
                            <nicknameModule userInfo={this.userInfo} />
                            <span style="float:right" class="show-all__btn" v-show={this.isShowBtn} on-click={this.toogelShowAll} >{this.showBenText}</span>
                            <p ref="content" class={['content__item', { open: this.isContentShowAll }]}>{this.content}</p>
                            <span class="show-all__btn" v-show={this.isShowBtn} on-click={this.toogelShowAll} >{this.showBenText}</span>
                            <metaModule reply={this.reply} onclickReplyBtn={this.clickReplyBtnHandler} on-delete={this.deleteHandler} />
                        </div>
                    </div>
                );
            },
            mounted() {
                this.contentHeight = this.$refs.content.offsetHeight;
            },
            methods: {
                toogelShowAll() {
                    this.isContentShowAll = !this.isContentShowAll;
                },
                clickReplyBtnHandler() {
                    this.showSendModuleHandler();
                    this.setSendPlaceholderHandler();
                },
                showSendModuleHandler() {
                    if (this.$parent.actionRpid === this.reply.rpid) {
                        this.$parent.isSendModuleShow = false;
                        this.$parent.actionRpid = 0;
                    } else {
                        this.$parent.isSendModuleShow = true;
                        this.$parent.actionRpid = this.reply.rpid;
                    }
                },
                setSendPlaceholderHandler() {
                    if (!this.isChild) {
                        this.$parent.placeholder = '';
                        this.$parent.parentID = 0;
                        return;
                    }
                    const { user, rpid } = this.reply;
                    this.$parent.placeholder = `回复 @${user.nickname} :`;
                    this.$parent.parentID = rpid;
                },
                deleteHandler() {
                    if (this.isChild) {
                        this.$parent.submitResult();
                        return;
                    }
                    this.$parent.$emit('delete');
                },
            },
        },
    },
    props: {
        aid: {
            type: [Number, String],
            required: true,
        },
        reply: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            actionRpid: 0,
            isSendModuleShow: false,
            placeholder: '',
            parentID: 0,
            page: 1,
            size: 5,
            childrens: null,
            count: null,
        };
    },
    computed: {
        root() {
            return this.reply.rpid;
        },
        parent() {
            return this.parentID || this.root;
        },
        children() {
            return this.childrens || this.reply.children;
        },
        roucnt() {
            return this.count || this.reply.rcount;
        },
    },
    methods: {
        async getReplyList() {
            const { aid, root, page, size } = this;
            const { data } = await getReplyListAPI(aid, { root, page, size });
            this.childrens = data.replies;
            this.count = data.count;
        },
        async submitResult() {
            this.page = 1;
            this.getReplyList();
        },
        async currentPageHandler(page) {
            this.page = page;
            this.getReplyList();
        },
    },
};
</script>

<style lang="less">
.reply_module-wrapper {
  margin: 30px 0 50px;
  color: #666;
  user-select: initial;
  .reply-main__group {
    padding: 10px 0;
    display: flex;
    .content__item {
      max-height: 300px;
      padding-top: 5px;
      display: inline-block;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      white-space: pre-wrap;
      color: #222;
      overflow: hidden;
    }
    .open {
      max-height: initial;
      overflow: initial;
    }
    .show-all__btn {
      display: inline-block;
      margin: 5px 0;
      cursor: pointer;
      user-select: none;
      color: darken(@base_color_2, 10%);
    }
  }
  .child__group {
    margin-left: 70px;
  }
  .avatar__item {
    margin-right: 20px;
  }
  .content__group {
    width: 100%;
  }
}
</style>
